import React from 'react';
import { Form, Input, Row, Col, InputNumber } from 'antd';
import { SalaryYearInput, SalaryMonthInput } from '@/pages/Recruitment/components/SalaryInput';
import { UploadOssLite } from '@/containers';
import { formatToThreePart } from '@/utils/utils';
import useSalaryChange from '../../hooks/useSalaryChange';

import styles from '../index.less';

const { TextArea } = Input;

export default function OriginalSalary({ form, commInfo, talentInfo, renderItem, isEdit, oneLineLayout, isSecond }) {
    const { getFieldDecorator } = form;
    const handleChangeSalary = useSalaryChange(form);

    // 初始原年薪
    const initMonthSalary = commInfo?.recruitSalaryRecordVO?.monthSalary ?? talentInfo.currentMonthSalary;
    React.useEffect(() => {
        handleChangeSalary('salarySaveDTO.monthSalary', initMonthSalary);
        // antd的会校验并未渲染的field？？？
        form.setFieldsValue({ 'salarySaveDTO.monthSalary': initMonthSalary ?? null });
    }, [initMonthSalary]);

    // 初始建议月薪
    const initExpectYearSalary = talentInfo?.expectSalary ?? commInfo?.recruitSalaryRecordVO?.expectYearSalary;
    React.useEffect(() => {
        handleChangeSalary('salarySaveDTO.expectYearSalary', initExpectYearSalary);
    }, [initExpectYearSalary]);

    /**
     * 获取原年薪、原月薪货币单位
     */
    const getOriginCurrencyCode = () =>
        commInfo?.recruitSalaryRecordVO?.currentSalaryCurrencyCode || // HR在薪资沟通页面落地的薪资货币单位
        talentInfo?.currentSalaryCurrencyCode || // 用户在邮件中填写的原始薪资货币单位
        talentInfo?.companyCurrencyCode; // 行政机构用于兜底显示

    return (
        <Row>
            <Col span={12}>
                <Form.Item label="原月薪" required>
                    {renderItem(
                        <div className={styles.formLineWrap}>
                            <Form.Item>
                                {getFieldDecorator('salarySaveDTO.monthSalary', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '原月薪不能为空'
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        // formatter={formatToThreePart}
                                        placeholder="请输入原月薪"
                                        min={0}
                                        onChange={value => {
                                            handleChangeSalary('salarySaveDTO.monthSalary', value);
                                        }}
                                        formatter={val => SalaryMonthInput(val, true)}
                                        parser={val => SalaryMonthInput(val)}
                                    />
                                )}
                            </Form.Item>
                            <span style={{ padding: '0 5px' }}>X</span>
                            <Form.Item>
                                {getFieldDecorator('salarySaveDTO.monthNumber', {
                                    initialValue:
                                        commInfo?.recruitSalaryRecordVO?.monthNumber || talentInfo.monthCount || 12,
                                    rules: [
                                        {
                                            required: true,
                                            message: '月份不能为空'
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        min={12}
                                        onChange={value => {
                                            handleChangeSalary('salarySaveDTO.monthNumber', value);
                                        }}
                                    />
                                )}
                            </Form.Item>
                            <span style={{ marginLeft: 8 }}>{getOriginCurrencyCode()}</span>
                        </div>,
                        // 只读状态
                        <>
                            {formatToThreePart(commInfo?.recruitSalaryRecordVO?.monthSalary) ?? ''}
                            <span style={{ padding: '0 5px' }}>X</span>
                            {commInfo?.recruitSalaryRecordVO?.monthNumber ?? ''}
                            <span style={{ marginLeft: 8 }}>{getOriginCurrencyCode()}</span>
                        </>,
                        isEdit
                    )}
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="原年薪">
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        {renderItem(
                            getFieldDecorator('salarySaveDTO.yearSalary', {
                                rules: [{ required: true, message: '原年薪不能为空' }]
                            })(
                                <InputNumber
                                    // formatter={formatToThreePart}
                                    placeholder="请输入原年薪"
                                    style={{ width: '100%' }}
                                    onChange={value => {
                                        handleChangeSalary('salarySaveDTO.yearSalary', value);
                                    }}
                                    formatter={val => SalaryYearInput(val, true)}
                                    parser={val => SalaryYearInput(val)}
                                />
                            ),
                            // 只读状态
                            formatToThreePart(commInfo?.recruitSalaryRecordVO?.yearSalary),
                            isEdit
                        )}
                        <span style={{ marginLeft: 8 }}>{getOriginCurrencyCode()}</span>
                    </div>
                </Form.Item>
            </Col>
            <Col span={24}>
                <Form.Item label="薪资说明" {...oneLineLayout}>
                    {renderItem(
                        getFieldDecorator('salarySaveDTO.remark', {
                            initialValue:
                                commInfo?.recruitSalaryRecordVO?.remark || talentInfo?.currentSalaryDesc || '',
                            rules: [{ max: 500, message: '薪资说明不能超过500个字符' }]
                        })(<TextArea placeholder="请输入薪资说明" style={{ height: 100 }} />),
                        commInfo?.recruitSalaryRecordVO?.remark,
                        isEdit
                    )}
                </Form.Item>
            </Col>
            <Col span={24}>
                <UploadOssLite
                    initialValue={
                        commInfo?.recruitSalaryRecordVO?.salaryProveUrl ||
                        talentInfo?.talentSalaryProveFileList?.[0]?.url
                    }
                    fieldName="salarySaveDTO.salaryProveUrl"
                    form={form}
                    buildInRules={[{ max: 10 }, { type: ['jpg', 'jpeg', 'png', 'mp3', 'wps', 'doc', 'docx', 'pdf'] }]}
                    label="薪资证明"
                    help={
                        isEdit
                            ? '支持 jpg、jpeg、png、mp3、wps、doc、docx、pdf 等格式的附件，单个文件大小为10MB以内'
                            : ''
                    }
                    editable={isEdit}
                    {...oneLineLayout}
                />
            </Col>
            <Col span={12}>
                <Form.Item label="期望年薪">
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        {renderItem(
                            getFieldDecorator('salarySaveDTO.expectYearSalary', {
                                initialValue:
                                    commInfo?.recruitSalaryRecordVO?.expectYearSalary ?? talentInfo?.expectSalary,
                                rules: [
                                    {
                                        required: !isSecond,
                                        message: '期望年薪不能为空'
                                    }
                                ]
                            })(
                                <InputNumber
                                    // formatter={formatToThreePart}
                                    placeholder="请输入期望年薪"
                                    min={0}
                                    style={{ width: '100%' }}
                                    onChange={value => {
                                        handleChangeSalary('salarySaveDTO.expectYearSalary', value);
                                    }}
                                    formatter={val => SalaryYearInput(val, true)}
                                    parser={val => SalaryYearInput(val)}
                                />
                            ),
                            formatToThreePart(commInfo?.recruitSalaryRecordVO?.expectYearSalary),
                            isEdit
                        )}
                        <span style={{ marginLeft: 8 }}>
                            {talentInfo?.expectSalaryCurrencyCode || talentInfo?.companyCurrencyCode}
                        </span>
                    </div>
                </Form.Item>
            </Col>
            <Col span={12}>
                <Form.Item label="期望月薪" required>
                    {renderItem(
                        <div className={styles.formLineWrap}>
                            <Form.Item>
                                {getFieldDecorator('salarySaveDTO.expectMonthSalary', {
                                    rules: [{ required: true, message: '期望月薪不能为空' }]
                                })(
                                    <InputNumber
                                        // formatter={formatToThreePart}
                                        placeholder="请输入期望月薪"
                                        onChange={value => {
                                            handleChangeSalary('salarySaveDTO.expectMonthSalary', value);
                                        }}
                                        formatter={val => SalaryMonthInput(val, true)}
                                        parser={val => SalaryMonthInput(val)}
                                    />
                                )}
                            </Form.Item>
                            <span style={{ padding: '0 5px' }}>X</span>
                            <Form.Item>
                                {getFieldDecorator('salarySaveDTO.expectMonthNumber', {
                                    // initialValue: commInfo?.recruitSalaryRecordVO?.expectMonthNumber || 16,
                                    initialValue:
                                        commInfo?.recruitSalaryRecordVO?.expectMonthNumber ||
                                        talentInfo.expectMonthNumber ||
                                        16,
                                    rules: [
                                        {
                                            required: true,
                                            message: '月份不能为空'
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        min={12}
                                        onChange={value => {
                                            handleChangeSalary('salarySaveDTO.expectMonthNumber', value);
                                        }}
                                    />
                                )}
                            </Form.Item>
                            <span style={{ paddingLeft: 8 }}>
                                {talentInfo?.expectSalaryCurrencyCode || talentInfo?.companyCurrencyCode || '月'}
                            </span>
                        </div>,
                        <>
                            {formatToThreePart(commInfo?.recruitSalaryRecordVO?.expectMonthSalary) ?? ''}
                            <span style={{ padding: '0 5px' }}>X</span>
                            {commInfo?.recruitSalaryRecordVO?.expectMonthNumber ?? ''}
                            <span style={{ paddingLeft: 8 }}>
                                {talentInfo?.expectSalaryCurrencyCode || talentInfo?.companyCurrencyCode || '月'}
                            </span>
                        </>,
                        isEdit
                    )}
                </Form.Item>
            </Col>
        </Row>
    );
}
